<html>
    <head>
        <title><!--PLACEHOLDER:TITLE--></title>
        <link type="text/css" rel="stylesheet" href="lib/ECOTree/ECOTree.css" />
        <script type="text/javascript" src="lib/ECOTree/ECOTree.js"></script>
        <script type="text/javascript" src="lib/jquery/jquery-1.4.2.min.js"></script>
        <xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
        <style>v\:*{ behavior:url(#default#VML);}</style>
        <style>
            label, select, option, input, a {
                font-family : "Verdana";
                font-size : 10px;
                color : black;
            }
            .copy {
                font-family : "Verdana";
                font-size : 10px;
                color : #CCCCCC;
            }
        </style>
        <script>
            var t = null;

            function CreateTree() {
                t = new ECOTree('t','sample1');
/*PLACEHOLDER:NODES*/
                t.config.useTarget = true;                
/*PLACEHODLER:COLLAPSE*/
                t.UpdateTree();               
                
            }

            function ChangePosition() {
                var pos = parseInt(document.options.rootPosition.value);
                t.config.iRootOrientation = pos;
                switch (pos)
                {
                    case ECOTree.RO_TOP:
                        t.config.topXAdjustment = 20;
                        t.config.topYAdjustment = -20;
                        break;
                    case ECOTree.RO_BOTTOM:
                        t.config.topXAdjustment = 20;
                        t.config.topYAdjustment = -500;
                        break;
                    case ECOTree.RO_RIGHT:
                        t.config.topXAdjustment = 20;
                        t.config.topYAdjustment = -500;
                        break;
                    case ECOTree.RO_LEFT:
                        t.config.topXAdjustment = 20;
                        t.config.topYAdjustment = -20;
                        break;
                }
                t.UpdateTree();
            }

            function ChangeLinkType() {
                t.config.linkType = document.options.linktype.value;
                t.UpdateTree();
            }

            function ChangeNodeAlign() {
                t.config.iNodeJustification = parseInt(document.options.nodealign.value);
                t.UpdateTree();
            }

            function Modify(what, inp, val) {
                var q = parseInt(document.options[inp].value) + val;
                document.options[inp].value = q;
                t.config[what] = q;
                t.UpdateTree();
            }

            function IncreaseSubtreeSep() { Modify("iSubtreeSeparation","stsep",5); }
            function DecreaseSubtreeSep() { Modify("iSubtreeSeparation","stsep",-5); }
            function IncreaseSiblingSep() { Modify("iSiblingSeparation","sbsep",5); }
            function DecreaseSiblingSep() { Modify("iSiblingSeparation","sbsep",-5); }
            function IncreaseLevelSep() { Modify("iLevelSeparation","lvsep",5); }
            function DecreaseLevelSep() { Modify("iLevelSeparation","lvsep",-5); }

            function ChangeColors() {
                var nodes = [/*PLACEHOLDER:INDEXES*/];
                var color = document.options.colorSet.value;
                var c = "";
                t.config.linkColor = color;
                switch (color)
                {
                    case "red":
                        c = "#FFCCCC";
                        t.config.levelColors = t.config.levelBorderColors = ["#FF5555","#FF8888","#FFAAAA","#FFCCCC"];
                        break;
                    case "green":
                        c = "#CCFFCC";
                        t.config.levelColors = t.config.levelBorderColors = ["#55FF55","#88FF88","#AAFFAA","#CCFFCC"];
                        break;
                    case "blue":
                        c = "#CCCCFF";
                        t.config.levelColors = t.config.levelBorderColors = ["#5555FF","#8888FF","#AAAAFF","#CCCCFF"];
                        break;
                }
                for (var n = 0; n < nodes.length; n++) {
                        t.setNodeColors(nodes[n], c, color, false);
                }
                t.UpdateTree();
            }

            function ChangeSearchMode() {
                var mode = parseInt(document.options.searchMode.value);
                t.config.searchMode = mode;
            }

            function changeTitle(){
                var txt = document.options.changeTitle.value;
                document.title = txt;
                document.getElementById('theTitle').innerHTML = txt;
            }

            function SearchTree() {
                var txt = document.options.search.value;
                t.searchNodes(txt);
            }

            function ChangeSelMode() {
                var mode = parseInt(document.options.selMode.value);
                t.config.selectMode = mode;
                t.unselectAll();
            }

            function ChangeNodeFill() {
                var mode = parseInt(document.options.nodefill.value);
                t.config.nodeFill = mode;
                t.UpdateTree();
            }

            function ChangeColorStyle() {
                var mode = parseInt(document.options.colorstyle.value);
                t.config.colorStyle = mode;
                t.UpdateTree();
            }

            function ChangeUseTarget() {
                var flag = (document.options.usetarget.value == "true");
                t.config.useTarget = flag;
                t.UpdateTree();
            }

            function toggleOptions() {
                var obj = document.getElementById('MoreOptions');
                if (obj.style.display == "none") {
                    $('#browserNotice').hide();
                    obj.style.display = "inline";
                } else {
                    obj.style.display = "none";
                    if(getInternetExplorerVersion() == -1) {
                        $('#browserNotice').show();
                    }
                }
            }

            function selectedNodes() {
                var selnodes = t.getSelectedNodes();
                var s = [];
                for (var n = 0; n < selnodes.length; n++)
                {
                    s.push('' + n + ': Id=' + selnodes[n].id + ', Title='+ selnodes[n].dsc + ', Metadata='+ selnodes[n].meta + '\n');
                }
                alert('The selected nodes are:\n\n' + ((selnodes.length >0) ? s.join(''): 'None.'));
            }

            function showBrowserNotice(){
                if(getInternetExplorerVersion() == -1){
                    $('#browserNotice').show();
                }
            }
            function getInternetExplorerVersion()
            // Returns the version of Internet Explorer or a -1
            // (indicating the use of another browser).
            {
                var rv = -1; // Return value assumes failure.
                if (navigator.appName == 'Microsoft Internet Explorer'){
                    var ua = navigator.userAgent;
                    var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
                    if (re.exec(ua) != null){
                        rv = parseFloat( RegExp.$1 );
                    }
                }
                return rv;
            }
        </script>
    </head>
    <body onload="CreateTree(); showBrowserNotice();">
        <div class="noprint">
            <span id="browserNotice" style="display:none; float:right; font-family:Verdana; font-size:small;">This page works best in Internet Explorer 8</span>
            <form id="mainform" name="options">
                <table style="border-top: #BADBE8 1px solid; width:100%;border-bottom: #336633 5px solid;">
                    <tr>
                        <td valign="Top" width="50%">
                            <table>
                                <tr>
                                    <td>
                                        <label>Change Title:</label>
                                    </td>
                                    <td>
                                        <input id="changeTitle" value="" size="30" maxlength="50" tabindex="1">
                                        <a tabindex="2" href="javascript:changeTitle();"><img border=0 alt="" src="img/plus.gif"></a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <label>Search:</label>
                                    </td>
                                    <td>
                                        <input id="search" value="vacant" size="30" maxlength="50" tabindex="3">
                                        <a tabindex="4" href="javascript:SearchTree();"><img border=0 align="absbottom" alt="" src="img/search.gif"></a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <label>Link to sub charts:</label>
                                    </td>
                                    <td>
                                        <select id="usetarget" onchange="ChangeUseTarget();" >
                                            <option value="false" selected>No</option>
                                            <option value="true">Yes</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2">
                                        <a href="javascript:t.collapseAll();">Collapse All</a>
                                        <a href="javascript:t.expandAll();">Expand All</a>
                                        <a href="javascript:t.unselectAll();">Unselect All</a>
                                        <a href="javascript:toggleOptions();">More Options</a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td valign="top" width="50%">
                            <div id="MoreOptions" style="float:right;display:none;">
                                <table border="0" cellspacing="0">
                                    <tr>
                                        <td class="labelSection">
                                            Colors:
                                        </td>
                                        <td class="labelCell">
                                            <label>Color:</label>
                                        </td>
                                        <td class="valueCell">
                                            <select id="colorSet" onchange="ChangeColors();" >
                                                <option value="red">Red</option>
                                                <option value="green">Green</option>
                                                <option value="blue" selected>Blue</option>
                                            </select>
                                        </td>
                                        <td class="labelCell">
                                            <label>Style:</label>
                                        </td>
                                        <td class="valueCell">
                                            <select id="nodefill" onchange="ChangeNodeFill();" >
                                                <option value=0 selected>Gradient</option>
                                                <option value=1>Solid</option>
                                            </select>
                                        </td>
                                        <td class="labelCell">
                                            <label>Fill:</label>
                                        </td>
                                        <td class="valueCell">
                                            <select id="colorstyle" onchange="ChangeColorStyle();" >
                                                <option value=0>Node colors</option>
                                                <option value=1 selected>Level colors</option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr class="alt-row">
                                        <td class="labelSection">
                                            Layout:
                                        </td>
                                        <td class="labelCell">
                                            <label>Orientation:</label>
                                        </td>
                                        <td class="valueCell">
                                            <select id="rootPosition" onchange="ChangePosition();" >
                                                <option value="0" selected>Top</option>
                                                <option value="1">Bottom</option>
                                                <option value="2">Right</option>
                                                <option value="3">Left</option>
                                            </select>
                                        </td>
                                        <td class="labelCell">
                                            <label>Link type:</label>
                                        </td>
                                        <td class="valueCell">
                                            <select id="linktype" onchange="ChangeLinkType();" >
                                                <option value="M" selected>Manhattan</option>
                                                <option value="B">Bézier</option>
                                            </select>
                                        </td>
                                        <td class="labelCell">
                                            <label>Node Alignment:</label>
                                        </td>
                                        <td class="valueCell">
                                            <select id="nodealign" onchange="ChangeNodeAlign();" >
                                                <option value="0" selected>Top</option>
                                                <option value="1">Center</option>
                                                <option value="2">Bottom</option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="labelSection">
                                            Spacing:
                                        </td>
                                        <td class="labelCell">
                                            <label>Branch:</label>
                                        </td>
                                        <td class="valueCell">
                                            <a href="javascript:DecreaseSubtreeSep();"><img border=0 alt="" src="img/less.gif"></a>
                                            <input id="stsep" value=20 size="3" maxlength="3" readonly>
                                            <a href="javascript:IncreaseSubtreeSep();"><img border=0 alt="" src="img/plus.gif"></a>
                                        </td>
                                        <td class="labelCell">
                                            <label>Level:</label>
                                        </td>
                                        <td class="valueCell">
                                            <a href="javascript:DecreaseLevelSep();"><img border=0 alt="" src="img/less.gif"></a>
                                            <input id="lvsep" value=15 size="3" maxlength="3" readonly>
                                            <a href="javascript:IncreaseLevelSep();"><img border=0 alt="" src="img/plus.gif"></a>
                                        </td>
                                        <td class="labelCell">
                                            <label>Sibling:</label>
                                        </td>
                                        <td class="valueCell">
                                            <a href="javascript:DecreaseSiblingSep();"><img border=0 alt="" src="img/less.gif"></a>
                                            <input id="sbsep" value=10 size="3" maxlength="3" readonly>
                                            <a href="javascript:IncreaseSiblingSep();"><img border=0 alt="" src="img/plus.gif"></a>
                                        </td>
                                    </tr>
                                    <tr class="alt-row">
                                        <td class="labelSection">
                                            Misc:
                                        </td>
                                        <td class="labelCell">
                                            <label>Select mode:</label>
                                        </td>
                                        <td class="valueCell">
                                            <select id="selMode" onchange="ChangeSelMode();" >
                                                <option value=0 selected>Multiple</option>
                                                <option value=1>Single</option>
                                                <option value=2>None</option>
                                            </select>
                                        </td>
                                        <td class="labelCell">
                                            <label>Search mode:</label>
                                        </td>
                                        <td class="valueCell" colspan="3" align="left">
                                            <select id="searchMode" onchange="ChangeSearchMode();" >
                                                <option value=0 selected>Title</option>
                                                <option value=1>Metadata</option>
                                                <option value=2>Both</option>
                                            </select>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
        <h4 class="font" id="theTitle">
            <script type="text/javascript">
                document.write(document.title);
                document.title = document.title.replace(/<br \/>/gi, " - ");
            </script>
        </h4>
        <div id="sample1" />
    </body>
</html>
